<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('商户代付')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-merhcantWallet-withdrawal">
			<div class="form-group">
				<label class="col-sm-3 control-label">选择渠道：</label>
				<div class="col-sm-8">
					<select class="form-control" id="channelId" name="channelId">
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">渠道钱包信息：</label>
                <div class="col-sm-8">
                    <input id="channelWalletInfo" name="channelWalletInfo" class="form-control" type="text" readonly>
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-3 control-label">选择商户：</label>
				<div class="col-sm-8">
					<select class="form-control" id="merchantId" name="merchantId">
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">商户钱包：</label>
				<div class="col-sm-8">
					<select class="form-control" id="walletKindId" name="walletKindId">
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">商户钱包信息：</label>
				<div class="col-sm-8">
					<input id="merchantWalletInfo" name="merchantWalletInfo" class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">代付金额(元)：</label>
				<div class="col-sm-8">
					<input id="accountBalance" name="accountBalance" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">商户收款银行：</label>
				<div class="col-sm-8">
					<select class="form-control" id="merchantBank" name="merchantBank">
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">银行类型：</label>
				<div class="col-sm-8">
					<select class="form-control" id="bankId" name="bankId" required>
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">分行：</label>
				<div class="col-sm-8">
					<input id="bankBranch" name="bankBranch" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">支行：</label>
				<div class="col-sm-8">
					<input id="bankSubBranch" name="bankSubBranch" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">所在省：</label>
				<div class="col-sm-8">
					<select class="form-control" id="bankProvince" name="bankProvince" required>
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">所在市：</label>
				<div class="col-sm-8">
					<select class="form-control" id="bankCity" name="bankCity" required>
						<option value="" selected>----请选择----</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">联行号：</label>
				<div class="col-sm-8">
					<input id="bankUnionNo" name="bankUnionNo" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">持卡人：</label>
				<div class="col-sm-8">
					<input id="bankAccountOwner" name="bankAccountOwner" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">卡号：</label>
				<div class="col-sm-8">
					<input id="bankAccountNo" name="bankAccountNo" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">账户类型：</label>
				<div class="col-sm-8">
					<select class="form-control" id="bankAccountType" name="bankAccountType" required>
						<option value=0>对私</option>
						<option value=1>对公</option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">提款密码：</label>
				<div class="col-sm-8">
					<input id="withdrawalPassword" name="withdrawalPassword" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">谷歌机器验证码：</label>
				<div class="col-sm-8">
					<input id="googleCode" name="googleCode" class="form-control" type="text" required>
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "merchant/wallet";
        var $form = $("#form-merhcantWallet-withdrawal");
        var $province = $form.find("select[name='bankProvince']");
        var $city = $form.find("select[name='bankCity']");


        $.validator.addMethod("number",function (value, element, params) {
            var exp = new RegExp(params);
            return exp.test(value);
        },"请输入数字(注意空格)");
        $.validator.addMethod("regex",function (value, element, params) {
            var exp = new RegExp(params);
            return exp.test(value);
        },"请输入数字(可保留两位小数)");
        /*表单校验*/
		$("#form-merhcantWallet-withdrawal").validate({
			rules:{
                accountBalance:{
                    regex:"^[0-9]+(.[0-9]{2}|.[0-9]{1})?$"
				},
                bankAccountNo: {
                    number:"^[1-9]\\d*$"
				}
			},
			focusCleanup: true
		});



        /*选择商户下拉框 */
        $.post(ctx + "merchant/merchantInfo/list", {'status':'0'},function (response) {
            var data = response.rows;
            var option = "";
            for (var i = 0; i < data.length; i++) {
                option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
            }
            $("#form-merhcantWallet-withdrawal").find("select[name='merchantId']").html("").append(option);
            // 初始化商户钱包下拉框
            var merchantId = data[0].id;
            initMerchantWalletKindId(merchantId);
            // 初始化商户收款银行下拉框
            initMerchantBank(merchantId);
        });
        /* 商户钱包下拉框选择事件   更新商户钱包下拉框 */
        $("#form-merhcantWallet-withdrawal").find("select[name='merchantId']").change(function () {
            var merchantId = $("#form-merhcantWallet-withdrawal").find("select[name='merchantId']").val();
            // 更新商户钱包信息
            initMerchantWalletKindId(merchantId);
            // 更新银行下拉框信息
            initMerchantBank(merchantId);
        });




        /*选择渠道下拉框*/
        $.post(ctx + "channel/channelInfo/list", {'status':'0'},function (response) {
            if (response.code == 0) {
                var data = response.rows;
                var option = "";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='"+ data[i].id +"'>" +data[i].name + "</option>"
                }
                $("#form-merhcantWallet-withdrawal").find("select[name='channelId']").html("").append(option);
                // 初始化渠道钱包信息
                var channelId = data[0].id;
                initChannelWalletInfo(channelId);
			}else {
                $.modal.alertError("初始化信息异常");
			}
        });
        /* 渠道下拉框选择事件   更新渠道钱包信息 */
        $("#form-merhcantWallet-withdrawal").find("select[name='channelId']").change(function () {
            var channelId = $("#form-merhcantWallet-withdrawal").find("select[name='channelId']").val();
            // 更新渠道钱包信息
            initChannelWalletInfo(channelId);
        });




        /* 渠道钱包信息 */
        function initChannelWalletInfo(channelId) {
            $.post(ctx + "channel/wallet/list", {'channelId':channelId},function (response) {
                if (response.code == 0) {
                    var data = response.rows;
                    var accountBalance = new Decimal(data[0].accountBalance).div(new Decimal(100)).toFixed(2);
                    var message = "余额：" + accountBalance+"元";
                    $("#form-merhcantWallet-withdrawal").find("input[name='channelWalletInfo']").val(message);
				}else {
                    $.modal.alertError("初始化信息异常");
				}
            });
        }




        /* 商户钱包下拉框 */
		function initMerchantWalletKindId(merchantId) {
            $.post(ctx + "merchant/wallet/list", {'merchantId':merchantId},function (response) {
				if (response.code == 0) {
                    var data = response.rows;
                    var option = "";
                    for (var i = 0; i < data.length; i++) {
                        option += "<option value='"+ data[i].walletKindId +"'>" +data[i].walletKindName + "</option>"
                    }
                    $("#form-merhcantWallet-withdrawal").find("select[name='walletKindId']").html("").append(option);
					// 初始化商户钱包信息
					if (typeof(data[0])=="undefined") {
                        merhcantWalletInfo(merchantId, -1);
                        option = "<option value=''>" + "选中的商户没有钱包" + "</option>"
                        $("#form-merhcantWallet-withdrawal").find("select[name='walletKindId']").html("").append(option);
					}else {
                        merhcantWalletInfo(merchantId, data[0].walletKindId);
					}
				} else {
                    $.modal.alertError("初始化信息异常");
				}
			});
        }
        /* 商户钱包下拉框选择事件   更新商户钱包信息 */
        $("#form-merhcantWallet-withdrawal").find("select[name='walletKindId']").change(function () {
            var merchantId = $("#form-merhcantWallet-withdrawal").find("select[name='merchantId']").val();
            var walletKindId = $("#form-merhcantWallet-withdrawal").find("select[name='walletKindId']").val();
            // 更新商户钱包信息
            merhcantWalletInfo(merchantId,walletKindId);
        });




		/* 商户钱包信息 */
		function merhcantWalletInfo(merchantId, walletKindId) {
            if (walletKindId != -1) {
                $.post(ctx + "merchant/wallet/list", {'merchantId':merchantId,'walletKindId':walletKindId},function (response) {
                    if (response.code == 0) {
                        var data = response.rows;
                        var accountBalance = new Decimal(data[0].accountBalance).div(new Decimal(100));
                        var frozenBalance = new Decimal(data[0].frozenBalance).div(new Decimal(100));
                        var waitLiquidatedBalance = new Decimal(data[0].waitLiquidatedBalance).div(new Decimal(100));
                        var unliquidatedBalanceOne = new Decimal(data[0].unliquidatedBalanceOne).div(new Decimal(100));
                        var unliquidatedBalanceTwo = new Decimal(data[0].unliquidatedBalanceTwo).div(new Decimal(100));

                        // One = 总金额 - 冻结金额
                        var balanceOne = new Decimal(accountBalance).sub(new Decimal(frozenBalance));
                        var balanceTwo = new Decimal(balanceOne).sub(new Decimal(waitLiquidatedBalance));
						// 可用余额
                        var unliquidatedBalance = new Decimal(unliquidatedBalanceOne).add(new Decimal(unliquidatedBalanceTwo));
                        var usableBalance = new Decimal(balanceTwo).sub(new Decimal(unliquidatedBalance));
                        var message = "可用余额：" + usableBalance+"元" + "    待结算金额：" + waitLiquidatedBalance +"元" + "    未结算金额：" + unliquidatedBalance + "元";
                        $("#form-merhcantWallet-withdrawal").find("input[name='merchantWalletInfo']").val(message);
                    }
                });
			}else {
                var message = "余额：" + 0.00+"元" + "    冻结金额：" + 0.00 +"元";
                $("#form-merhcantWallet-withdrawal").find("input[name='merchantWalletInfo']").val(message);
			}
        }



        /* 商户收款银行下拉框 */
		function initMerchantBank(merhcantId) {
            $.post(ctx + "merchant/merchantBank/list", {'merchantId':merhcantId},function (response) {
				if (response.code == 0) {
                    var data = response.rows;
                    var option = "<option value=''>" + "--------" + "</option>";
                    for (var i = 0; i < data.length; i++) {
                        option += "<option value='"+ data[i].id +"'>" + data[i].bankName + "┃持卡人:" + data[i].bankAccountOwner +
							"┃卡号:" + data[i].bankAccountNo + "┃" + data[i].bankProvince + " " + data[i].bankCity +"</option>"
                    }
                    $("#form-merhcantWallet-withdrawal").find("select[name='merchantBank']").html("").append(option);
				}
			});
        }
        /* 商户收款银行下拉框选择事件   更新银行等信息 */
        $form.find("select[name='merchantBank']").change(function () {
            var id = $form.find("select[name='merchantBank']").val();
            if (id) {
                $.post(ctx + "merchant/merchantBank/list",{'id':id},function (response) {
						if (response.code == 0) {
                            var data = response.rows;
                            var merchantBank = data[0];
							// 银行类型  不可选
                            $form.find("select[name='bankId']").val(merchantBank.bankId).prop('selected',true);
                            $form.find("select[name='bankId']").val(merchantBank.bankId).prop('disabled',true);
                            // 分行     不可填
                            $form.find("input[name='bankBranch']").val(merchantBank.bankBranch);
                            $form.find("input[name='bankBranch']").attr('disabled', true);
                            // 支行 		不可填
                            $form.find("input[name='bankSubBranch']").val(merchantBank.bankSubBranch);
                            $form.find("input[name='bankSubBranch']").attr('disabled', true);
                            // 所在省   不可选
                            $form.find("select[name='bankProvince']").val(merchantBank.bankProvince).prop('selected',true);
                            $form.find("select[name='bankProvince']").val(merchantBank.bankProvince).prop('disabled',true);
                            // 所在市   不可选
                            getCityOrCounty(2, merchantBank.bankProvince, $city, merchantBank.bankCity);
                            $form.find("select[name='bankCity']").val(merchantBank.bankCity).prop('disabled',true);
                            // 联行号   不可填
                            $form.find("input[name='bankUnionNo']").val(merchantBank.bankUnionNo);
                            $form.find("input[name='bankUnionNo']").attr('disabled', true);
                            // 持卡人   不可填
                            $form.find("input[name='bankAccountOwner']").val(merchantBank.bankAccountOwner);
                            $form.find("input[name='bankAccountOwner']").attr('disabled', true);
                            // 卡号     不可填
                            $form.find("input[name='bankAccountNo']").val(merchantBank.bankAccountNo);
                            $form.find("input[name='bankAccountNo']").attr('disabled', true);
                            // 账户类型	不可填
                            $form.find("select[name='bankAccountType']").val(merchantBank.bankAccountType).prop('selected',true);
                            $form.find("select[name='bankAccountType']").attr('disabled', true);
						}
				});
			}else {
				/*去掉不可选不可填属性*/
                removeCss();
                getCityOrCounty(2, $province.val(), $city, $city.val());
			}

        });





        /*初始化省市县*/
        /*初始化-省*/
        $.post(ctx + "basedata/areas/list",{'levelType':1,'parentId':100000},function (response) {
            var data = response.rows;
            var option = "<option value=''>" + "请选择" + "</option>";
            for (var i = 0; i < data.length; i++){
                option += "<option value='" + data[i].province + "'>" + data[i].province + "</option>"
            }
            $province.html("").append(option);
        });
        /*省下拉框-选择事件*/
        var str="<option value=''>" + "请选择" + "</option>";
        $province.change(function () {
            $city.html(str);
            if ($province.val())
                getCityOrCounty(2, $province.val(), $city, $city.val());
        });

        /*根据省查询市*/
        function getCityOrCounty(LevelType,province,htm,address) {
            $.post(ctx + "basedata/areas/parentId", {'levelType':LevelType,'province':province}, function (response) {
                var data = response.rows;
                var option = "<option value=''>" +"请选择"+ "</option>";
                for (var i = 0; i < data.length; i++) {
                    if (data[i].city == address) {
                        option += "<option value='" + data[i].city + "' selected='selected'>" + data[i].city + "</option>"
                    }else {
                        option += "<option value='" + data[i].city + "'>" + data[i].city + "</option>"
                    }
                }
                htm.html("").append(option);
            });
        }


        /*银行类型下拉框*/
        $.post(ctx + "basedata/bank/list", {'name':''},function (response) {
            var data = response.rows;
            var option = "<option value=''>" + "请选择" + "</option>";
            for (var i = 0; i < data.length; i++) {
                option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
            }
            $form.find("select[name='bankId']").html("").append(option);
        });



        /*去掉不可选不可填属性*/
        function removeCss() {
            // 银行可选
            $form.find("select[name='bankId']").prop('disabled',false);
            // 分行可填
            $form.find("input[name='bankBranch']").prop('disabled', false);
            // 支行可填
            $form.find("input[name='bankSubBranch']").prop('disabled', false);
            // 所在省可选
            $form.find("select[name='bankProvince']").prop('disabled',false);
            getCityOrCounty(2, $province.val(), $city, $city.val());
            // 所在市可选
            $form.find("select[name='bankCity']").prop('disabled',false);
            // 联行号可填
            $form.find("input[name='bankUnionNo']").prop('disabled', false);
            // 持卡人可填
            $form.find("input[name='bankAccountOwner']").prop('disabled', false);
            // 卡号可填
            $form.find("input[name='bankAccountNo']").prop('disabled', false);
            // 账户类型可选
            $form.find("select[name='bankAccountType']").prop('disabled', false);

        }



        /*提交表单*/
        function submitHandler() {
            if ($.validate.form()) {
                removeCss();
                var data = $("#form-merhcantWallet-withdrawal").serializeArray();
                // 转化成 (分)
                data[5].value = new Decimal(data[5].value).mul(new Decimal(100));
                var walletKindId = $("#form-merhcantWallet-withdrawal").find("select[name='walletKindId']").val();
				if (walletKindId == "") {
                    $.modal.alertError("选中的商户没有钱包！");
                    return;
				}
                $.operate.save(prefix + "/withdrawalPay", data);
            }
        }
	</script>
</body>
</html>
